import useGetLatestComment from "@/app/[language]/query/useGetLatestComment";
import CommentTitleView from "@/components/CommentTitleView";
import { useTranslations } from "next-intl";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import { getDatetime } from "taehui-ts/date";

export default function LatestCommentsView() {
  const t = useTranslations();

  const { data: latestComment, isFetched: isLatestCommentLoaded } =
    useGetLatestComment();

  return (
    <ListGroup>
      <ListGroupItem>{t("latestCommentsView")}</ListGroupItem>
      {isLatestCommentLoaded
        ? latestComment.map((latestComment) => (
            <ListGroupItem key={latestComment.commentID}>
              <CommentTitleView
                forumID={latestComment.forumID}
                essayID={latestComment.essayID}
                comment={latestComment}
              />
            </ListGroupItem>
          ))
        : [...Array(5).keys()].map((i) => (
            <ListGroupItem key={i}>
              <CommentTitleView
                comment={{
                  commentID: -1,
                  date: getDatetime(),
                  avatarID: "",
                  avatarName: "",
                  text: "Loading...",
                  forumID: "",
                  essayID: -1,
                }}
              />
            </ListGroupItem>
          ))}
    </ListGroup>
  );
}